/*
 * @Author: zhougb9 zhougb9@qq.com
 * @Date: 2025-05-21 22:02:08
 * @LastEditors: zhougb9 zhougb9@qq.com
 * @LastEditTime: 2025-05-21 22:57:46
 * @FilePath: \LibreTVe:\Code\LibreTVReact\src\pages\play\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useState, useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import VideoPlayer from '@/components/VideoPlayer';
import { getPlayDetail, PlayDetailResult } from '@/services/detail';

function useQuery() {
  return new URLSearchParams(useLocation().search);
}

const PlayPage: React.FC = () => {
  const location = useLocation();
  const state = location.state as PlayDetailResult | undefined;
  const query = useQuery();
  const [detail, setDetail] = useState<PlayDetailResult | undefined>(state);
  const [loading, setLoading] = useState(false);
  const [current, setCurrent] = useState(0);

  useEffect(() => {
    if (!detail && query.get('vodId') && query.get('proxyId')) {
      console.log('detail',detail,'query:', query.get('vodId'), query.get('proxyId'));
      setLoading(true);
      getPlayDetail({
        vodId: query.get('vodId')!,
        proxyId: query.get('proxyId')!,
      }).then(res => setDetail(res.data[0])).finally(() => setLoading(false));
    }
  }, [detail, query]);

  if (loading) return <div style={{ color: '#fff', padding: 32 }}>加载中...</div>;
  if (!detail || !detail.vodPlayUrl || !detail.vodPlayUrl.length) {
    return <div style={{ color: '#fff', padding: 32 }}>无播放数据，请从搜索页点击进入</div>;
  }

  const { vodName, vodPlayUrl, vodActor, vodDirector, vodContent } = detail;

  return (
    <div style={{ display: 'flex', height: '100vh', background: '#181818' }}>
      {/* 左侧播放器 */}
      <div style={{ flex: 3, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', background: '#000' }}>
        <VideoPlayer src={vodPlayUrl[current]} width="90%" height={500} autoPlay showControls />
      </div>
      {/* 右侧集数 */}
      <div style={{ flex: 1, background: '#222', padding: 24, overflowY: 'auto' }}>
        <div style={{ color: '#fff', marginTop: 16 }}>
          <div>主演：{vodActor}</div>
          <div>导演：{vodDirector}</div>
          <div dangerouslySetInnerHTML={{ __html: vodContent || '' }} />
        </div>
        <h3 style={{ color: '#fff' }}>选集</h3>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
          {vodPlayUrl.map((url: string, idx: number) => (
            <button
              key={url}
              onClick={() => setCurrent(idx)}
              style={{
                width: 60,
                height: 36,
                margin: 4,
                background: idx === current ? '#ffd700' : '#333',
                color: idx === current ? '#222' : '#fff',
                border: 'none',
                borderRadius: 6,
                cursor: 'pointer',
                fontWeight: idx === current ? 'bold' : 'normal',
              }}
            >
              {`第${idx + 1}集`}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
};

export default PlayPage;
